<template>
  <layout title="popup弹出层">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="topPopup = true">顶部popup</options-list>
      <options-list icon="menu" @click="bottomPopup = true">底部popup</options-list>
      <options-list icon="menu" @click="leftPopup = true">左边popup</options-list>
      <options-list icon="menu" @click="rightPopup = true">右边popup</options-list>
      <options-list icon="menu" @click="centerPopup = true">中间popup</options-list>
    </layout-content>

    <layout-content title="隐藏关闭按钮">
      <options-list icon="menu" @click="hiddenCloseBtnPopup = true">隐藏关闭按钮</options-list>
    </layout-content>

    <layout-content title="不显示遮罩">
      <options-list icon="menu" @click="hiddenMaskPopup = true">隐藏遮罩</options-list>
    </layout-content>

    <layout-content title="透明遮罩">
      <options-list icon="menu" @click="opacityMaskPopup = true">透明遮罩</options-list>
    </layout-content>

    <layout-content title="自定义弹框">
      <options-list icon="menu" @click="customPopup = true">自定义弹框内容</options-list>
    </layout-content>
  </layout>

  <tn-popup v-model="topPopup" mode="top" width="100%" height="300rpx" :custom-style="customTopPopupStyle">
    <view class="tn-flex-center" style="height: 100%">图鸟UI</view>
  </tn-popup>
  <tn-popup v-model="bottomPopup" mode="bottom" width="100%" height="400rpx">
    <view class="tn-flex-center" style="height: 100%">图鸟UI</view>
  </tn-popup>
  <tn-popup v-model="leftPopup" mode="left" height="100%" width="300rpx" :custom-style="customTopPopupStyle">
    <view class="tn-flex-center" style="height: 100%; width: 100%">图鸟UI</view>
  </tn-popup>
  <tn-popup v-model="rightPopup" mode="right" height="100%" width="300rpx" :custom-style="customTopPopupStyle">
    <view class="tn-flex-center" style="height: 100%; width: 100%">图鸟UI</view>
  </tn-popup>
  <tn-popup v-model="centerPopup" mode="center" width="80%" height="300rpx">
    <view class="tn-flex-center" style="height: 100%; width: 100%">图鸟UI</view>
  </tn-popup>
  
  <tn-popup v-model="hiddenCloseBtnPopup" close-icon="" mode="center" width="80%" height="300rpx">
    <view class="tn-flex-center" style="height: 100%; width: 100%">图鸟UI</view>
  </tn-popup>

  <tn-popup v-model="hiddenMaskPopup" :mask="false" bg-color="tn-bg-gray--light" mode="center" width="80%" height="300rpx">
    <view class="tn-flex-center" style="height: 100%; width: 100%">
      <tn-button @click="hiddenMaskPopup = false">点我关闭</tn-button>
    </view>
  </tn-popup>

  <tn-popup v-model="opacityMaskPopup" transparent-mask bg-color="tn-bg-gray--light" mode="center" width="80%" height="300rpx">
    <view class="tn-flex-center" style="height: 100%; width: 100%">
      <tn-button @click="opacityMaskPopup = false">点我关闭</tn-button>
    </view>
  </tn-popup>

  <tn-popup v-model="customPopup" close-icon="" bg-color="transparent" mode="center" width="80%" height="300rpx">
    <view class="custom-popup tn-flex-center" style="height: 100%; width: 100%">
      <tn-button @click="customPopup = false">点我关闭</tn-button>
    </view>
  </tn-popup>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnPopup from '@/tuniao-ui/components/tn-popup/src/Popup.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'

const { customNavbar } = useSystemInfo()

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 控制popup弹出
let topPopup = ref<boolean>(false)
let bottomPopup = ref<boolean>(false)
let leftPopup = ref<boolean>(false)
let rightPopup = ref<boolean>(false)
let centerPopup = ref<boolean>(false)

let hiddenCloseBtnPopup = ref<boolean>(false)

let hiddenMaskPopup = ref<boolean>(false)

let opacityMaskPopup = ref<boolean>(false)

let customPopup = ref<boolean>(false)

// 使用了自定义顶部导航栏后从上边\左边\右边弹出popup需要向下偏移
const customTopPopupStyle: CSSProperties = {
  top: customNavbar.value.height + 'px'
}
</script>

<style lang="scss" scoped>
.custom-popup {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}
</style>
